<template>
  <div class="reportJuxinli-page" v-loading="loading">
    <div v-if="data">
      <div class="juxinli-title">互联网资信报告</div>
      <div class="juxinli-subtitle">
        <div class="juxinli-subtitle-no">编号：{{data.report.rpt_id}}</div>
        <div class="juxinli-subtitle-time">报告时间：{{data.report.update_time}}</div>
      </div>
      <div class="ju-apply">
        <!--用户申请表检测-->
        <div class="ju-apply-title">
          用户申请表检测
        </div>
        <li class="ju-apply-list">
          <div class="ju-apply-left">姓名：</div>
          <div class="ju-apply-inner">
            <div class="ju-apply-in">
              <div class="ju-apply-right">{{data.application_check[0].check_points.key_value}}</div>
            </div>
          </div>
        </li>

        <li class="ju-apply-list">
          <div class="ju-apply-left">身份证：</div>
          <div class="ju-apply-inner">
            <div class="ju-apply-in">
              <div class="ju-apply-right">
                <div class="ju-apply-rights">{{data.application_check[1].check_points.key_value}}</div>
                <div class="ju-apply-rights colorWhite"
                     :class="data.application_check[1].check_points.court_blacklist.arised?'backRed':'backGreen'">
                  {{data.application_check[1].check_points.court_blacklist.arised ? '黑名单：' + data.application_check[1].check_points.court_blacklist.black_type : '不在法院黑名单'}}
                </div>
                <div class="ju-apply-rights colorWhite"
                     :class="data.application_check[1].check_points.financial_blacklist.arised?'backRed':'backGreen'">
                  {{data.application_check[1].check_points.financial_blacklist.arised ? '黑名单：' + data.application_check[1].check_points.financial_blacklist.black_type : '不在金融机构黑名单'}}
                </div>
              </div>
              <div class="ju-apply-other">
                {{data.application_check[1].check_points.gender}} | {{data.application_check[1].check_points.age}} | {{data.application_check[1].check_points.province}} | {{data.application_check[1].check_points.city}} | {{data.application_check[1].check_points.region}}
              </div>
            </div>
          </div>
        </li>
        <li class="ju-apply-list">
          <div class="ju-apply-left">手机号：</div>
          <div class="ju-apply-inner">
            <div class="ju-apply-in">
              <div class="ju-apply-right">
                <div class="ju-apply-rights">{{data.application_check[2].check_points.website}} | </div>
                <div class="ju-apply-rights colorWhite"
                     :class="data.application_check[2].check_points.reliability.indexOf('非')==-1?'backGreen':'backRed'">
                  {{data.application_check[2].check_points.reliability}}
                </div>
                <div class="ju-apply-rights">{{data.application_check[2].check_points.reg_time}}</div>
              </div>
              <div class="ju-apply-other">
                <div class="ju-apply-rights">{{data.application_check[2].check_points.key_value}}</div>
                <div class="ju-apply-rights colorWhite"
                     :class="data.application_check[2].check_points.financial_blacklist.arised?'backRed':'backGreen'">
                  {{data.application_check[2].check_points.financial_blacklist.arised ? '黑名单：' + data.application_check[2].check_points.financial_blacklist.black_type : '不在金融机构黑名单'}}
                </div>
              </div>
            </div>
            <div class="ju-apply-in">
              <div class="ju-apply-right">
                <div class="ju-apply-rights"
                     :class="data.application_check[2].check_points.check_name.indexOf('成功')==-1?'colorGray':'colorGreen'">
                  {{data.application_check[2].check_points.check_name}}
                </div>
              </div>
            </div>
            <div class="ju-apply-in">
              <div class="ju-apply-right">
                <div class="ju-apply-rights"
                     :class="data.application_check[2].check_points.check_idcard.indexOf('成功')==-1?'colorGray':'colorGreen'">
                  {{data.application_check[2].check_points.check_idcard}}
                </div>
              </div>
            </div>
            <div class="ju-apply-in">
              <div class="ju-apply-right">
                <div class="ju-apply-rights colorGray">{{data.application_check[2].check_points.check_ebusiness}}</div>
              </div>
            </div>

          </div>
        </li>
        <li class="ju-apply-list">
          <div class="ju-apply-left">居住地址：</div>
          <div class="ju-apply-inner">
            <div class="ju-apply-in">
              <div class="ju-apply-right">
                <div class="ju-apply-rights"
                     :class="data.application_check[3].check_points.key_value!=''?'':'colorGray'">
                  {{data.application_check[3].check_points.key_value | filterPlace}}
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="ju-apply-list" v-if="data.application_check[5]">
          <div class="ju-apply-left">联系人：</div>
          <div class="ju-apply-inner">
            <div class="ju-apply-in">
              <div class="ju-apply-right">
                <div class="ju-apply-rights">
                  {{data.application_check[5].check_points.relationship}} ｜ {{data.application_check[5].check_points.contact_name}}｜ {{data.application_check[5].check_points.key_value}}
                </div>
                <div class="ju-apply-rights backGreen colorWhite">{{data.application_check[5].check_points.check_xiaohao}}</div>
              </div>
            </div>
            <div class="ju-apply-in">
              <div class="ju-apply-right">
                <div class="ju-apply-rights"
                     :class="data.application_check[6].check_points.check_mobile.indexOf('没有该联系人电话的通话记录')==-1?'colorGreen':'colorGray'">
                  {{data.application_check[5].check_points.check_mobile}}
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="ju-apply-list" v-if="data.application_check[6]">
          <div class="ju-apply-left">联系人：</div>
          <div class="ju-apply-inner">
            <div class="ju-apply-in">
              <div class="ju-apply-right">
                <div class="ju-apply-rights">
                  {{data.application_check[6].check_points.relationship}} ｜ {{data.application_check[6].check_points.contact_name}}｜ {{data.application_check[6].check_points.key_value}}
                </div>
                <div class="ju-apply-rights backGreen colorWhite">{{data.application_check[6].check_points.check_xiaohao}}</div>
              </div>
            </div>
            <div class="ju-apply-in">
              <div class="ju-apply-right">
                <div class="ju-apply-rights"
                     :class="data.application_check[6].check_points.check_mobile.indexOf('没有该联系人电话的通话记录')==-1?'colorGreen':'colorGray'">
                  {{data.application_check[6].check_points.check_mobile}}
                </div>
              </div>
            </div>
          </div>
        </li>

      </div>

      <div class="ju-apply ju-info">
        <!--用户信息表检测-->
        <div class="ju-apply-title">
          用户信息表检测
        </div>
        <!--联系人数据-->
        <div class="ju-info-subtitle">
          <div class="ju-subtitle-inner colorBlue">
            联系人数据
          </div>
          <div class="ju-info-lists">
            <div class="ju-infoList-title backGray">
              用户查询信息
            </div>
            <div class="ju-infoList-subtitle">
              <li>
                <div class="ju-infoList-left backGray">
                  查询过该用户的相关企业数据
                </div>
                <div class="ju-infoList-right">
                  <div :class="data.user_info_check.check_search_info.searched_org_cnt==''?'backGrey':''">
                    {{data.user_info_check.check_search_info.searched_org_cnt | filterString}}
                  </div>
                </div>
              </li>
              <li>
                <div class="ju-infoList-left backGray">
                  查询过该用户的相关企业类型
                </div>
                <div class="ju-infoList-right">
                  <div :class="data.user_info_check.check_search_info.searched_org_type==''?'backGrey':'backGreen'">
                    {{data.user_info_check.check_search_info.searched_org_type | filterString}}
                  </div>
                </div>
              </li>
              <li>
                <div class="ju-infoList-left backGray">
                  身份证组合过其他姓名
                </div>
                <div class="ju-infoList-right">
                  <div
                    :class="data.user_info_check.check_search_info.idcard_with_other_names==''?'backGrey':'backGreen'">
                    {{data.user_info_check.check_search_info.idcard_with_other_names | filterString}}
                  </div>
                </div>
              </li>
              <li>
                <div class="ju-infoList-left backGray">
                  身份证组合过其他电话
                </div>
                <div class="ju-infoList-right">
                  <div
                    :class="data.user_info_check.check_search_info.idcard_with_other_phones==''?'backGrey':'backGreen'">
                    {{data.user_info_check.check_search_info.idcard_with_other_phones | filterString}}
                  </div>
                </div>
              </li>
              <li>
                <div class="ju-infoList-left backGray">
                  电话号码组合过其他姓名
                </div>
                <div class="ju-infoList-right">
                  <div
                    :class="data.user_info_check.check_search_info.phone_with_other_names==''?'backGrey':'backGreen'">
                    {{data.user_info_check.check_search_info.phone_with_other_names | filterString}}
                  </div>
                </div>
              </li>
              <li>
                <div class="ju-infoList-left backGray">
                  电话号码组合过其他身份证
                </div>
                <div class="ju-infoList-right">
                  <div
                    :class="data.user_info_check.check_search_info.phone_with_other_idcards==''?'backGrey':'backGreen'">
                    {{data.user_info_check.check_search_info.phone_with_other_idcards | filterString}}
                  </div>
                </div>
              </li>
              <li>
                <div class="ju-infoList-left backGray">
                  电话号码注册过相关企业数量
                </div>
                <div class="ju-infoList-right">
                  <div :class="data.user_info_check.check_search_info.register_org_cnt==''?'backGrey':''">
                    {{data.user_info_check.check_search_info.register_org_cnt | filterString}}
                  </div>
                </div>
              </li>
              <li>
                <div class="ju-infoList-left backGray">
                  电话号码注册过相关企业类型
                </div>
                <div class="ju-infoList-right">
                  <div :class="data.user_info_check.check_search_info.register_org_type==''?'backGrey':'backGreen'">
                    {{data.user_info_check.check_search_info.register_org_type | filterString}}
                  </div>
                </div>
              </li>
              <li>
                <div class="ju-infoList-left backGray">
                  电话号码出现过公开网站
                </div>
                <div class="ju-infoList-right">
                  <div :class="data.user_info_check.check_search_info.arised_open_web==''?'backGrey':'backGreen'">
                    {{data.user_info_check.check_search_info.arised_open_web | filterString}}
                  </div>
                </div>
              </li>

            </div>
          </div>
        </div>
        <!--黑名单-->
        <div class="ju-info-subtitle ju-blackList">
          <div class="ju-subtitle-inner colorBlue">
            黑名单
          </div>
          <div class="ju-info-lists">
            <div class="ju-infoList-title">
              黑名单信息
            </div>
            <div class="ju-infoList-subtitle">
              <li>
                <div class="ju-infoList-left backGre">
                  黑中介分数
                </div>
                <div class="ju-infoList-right backGre">
                  {{data.user_info_check.check_black_info.phone_gray_score}}(分数范围0-100，参考分为10，分数越低关系越紧密）
                </div>
              </li>
              <li>
                <div class="ju-infoList-left backGre">
                  直接联系人中黑名单人数
                </div>
                <div class="ju-infoList-right backGre">
                  {{data.user_info_check.check_black_info.contacts_class1_blacklist_cnt}}（直接联系人：和被查询号码有通话记录）
                </div>
              </li>
              <li>
                <div class="ju-infoList-left backYellow">
                  间接联系人中黑名单人数
                </div>
                <div class="ju-infoList-right backYellow">
                  {{data.user_info_check.check_black_info.contacts_class2_blacklist_cnt}}（间接联系人：和被查询号码的直接联系人有通话记录）
                </div>
              </li>
              <li>
                <div class="ju-infoList-left backGray">
                  直接联系人人数
                </div>
                <div class="ju-infoList-right">
                  {{data.user_info_check.check_black_info.contacts_class1_cnt}}（直接联系人：和被查询号码有通话记录）
                </div>
              </li>
              <li>
                <div class="ju-infoList-left backGray">
                  引起黑名单的直接联系人数量
                </div>
                <div class="ju-infoList-right">
                  {{data.user_info_check.check_black_info.contacts_router_cnt}}（直接联系人有和黑名单用户的通讯记录的号码数量）
                </div>
              </li>
              <li class="last-li">
                <div class="ju-infoList-left backGray">
                  直接联系人中引起间接黑名单占比
                </div>
                <div class="ju-infoList-right">
                  {{data.user_info_check.check_black_info.contacts_router_ratio | filterPercent}}%（直接联系人有和黑名单用户的通讯记录的号码数量在直接联系人数量中的百分比）
                </div>
              </li>


            </div>
          </div>
        </div>
      </div>

      <div class="ju-apply ju-info ju-behavior">
        <!--用户行为检测-->
        <div class="ju-apply-title">
          用户行为检测
        </div>
        <div class="ju-info-subtitle">
          <div class="ju-subtitle-inner colorBlue">
            用户行为检测
          </div>
          <div class="ju-info-lists">
            <li>
              <div class="ju-behavior-left backGray ju-header">
                检查项
              </div>
              <div class="ju-behavior-center backGray ju-header">
                结果
              </div>
              <div class="ju-behavior-right backGray ju-header">
                依据
              </div>
            </li>
            <li v-if="data.behavior_check==null||data.behavior_check==''" class="backWarning noData">未收集到用户行为数据</li>
            <li v-if="data.behavior_check!=null||data.behavior_check!=''" v-for="item in data.behavior_check"
                :class="item.score==0?'backYellow':item.score==1?'backGre':'backWarning'">
              <div class="ju-behavior-left">
                {{item.check_point_cn}}
              </div>
              <div class="ju-behavior-center">
                {{item.result}}
              </div>
              <div class="ju-behavior-right">
                {{item.evidence}}
              </div>
            </li>


          </div>
        </div>
      </div>
      <!--运营商数据-->
      <div class="ju-apply ju-info ju-behavior ju-operator">
        <div class="ju-apply-title">
          运营商数据
        </div>
        <div class="ju-info-subtitle">
          <div class="ju-subtitle-inner colorBlue">
            运营商数据
          </div>
          <div class="ju-info-lists">
            <li>
              <div class="ju-operator-li backGray ju-header">
                运营商
              </div>
              <div class="ju-operator-li backGray ju-header">
                号码
              </div>
              <div class="ju-operator-li backGray ju-header">
                归属地
              </div>
              <div class="ju-operator-li backGray ju-header">
                月份
              </div>
              <div class="ju-operator-li backGray ju-header">
                呼叫次数
              </div>
              <div class="ju-operator-li backGray ju-header">
                主叫次数
              </div>
              <div class="ju-operator-li backGray ju-header">
                主叫时间（分钟）
              </div>
              <div class="ju-operator-li backGray ju-header">
                被叫次数
              </div>
              <div class="ju-operator-li backGray ju-header">
                被叫时间（分钟）
              </div>
              <div class="ju-operator-li backGray ju-header">
                短信数量
              </div>
              <div class="ju-operator-li backGray ju-header">
                话费消量
              </div>
            </li>
            <li v-if="data.cell_behavior[0].behavior==null||data.cell_behavior[0].behavior==''"
                class="backWarning noData">未收集到运营商数据
            </li>
            <li v-if="data.cell_behavior[0].behavior!=null||data.cell_behavior[0].behavior!=''"
                v-for="item in data.cell_behavior[0].behavior">
              <div class="ju-operator-li">
                <div>{{item.cell_operator_zh}}</div>
              </div>
              <div class="ju-operator-li">
                <div>{{item.cell_phone_num}}</div>
              </div>
              <div class="ju-operator-li">
                <div>{{item.cell_loc}}</div>
              </div>
              <div class="ju-operator-li">
                <div>{{item.cell_mth}}</div>
              </div>
              <div class="ju-operator-li">
                <div>{{item.call_cnt}}</div>
              </div>
              <div class="ju-operator-li">
                <div>{{item.call_out_cnt}}</div>
              </div>
              <div class="ju-operator-li">
                <div>{{item.call_out_time | filterFixed}}</div>
              </div>
              <div class="ju-operator-li">
                <div>{{item.call_in_cnt}}</div>
              </div>
              <div class="ju-operator-li">
                <div>{{item.call_in_time | filterFixed}}</div>
              </div>
              <div class="ju-operator-li">
                <div>{{item.sms_cnt}}</div>
              </div>
              <div class="ju-operator-li">
                <div :class="item.total_amount==-1.0?'backRed':''">{{item.total_amount | filterNoData}}</div>
              </div>

            </li>

          </div>
        </div>
      </div>
      <!--联系人区域汇总-->
      <div class="ju-apply ju-info  ju-behavior ju-content">
        <div class="ju-apply-title">
          联系人区域汇总
        </div>
        <div class="ju-info-subtitle">
          <div class="ju-subtitle-inner ju-subtitle-inner2 colorBlue">
            联系人区域汇总
          </div>
          <div class="ju-info-lists">
            <li>
              <div class="ju-operator-li backGray ju-header">
                地区
              </div>
              <div class="ju-operator-li backGray ju-header">
                号码次数
              </div>
              <div class="ju-operator-li backGray ju-header">
                呼入次数
              </div>
              <div class="ju-operator-li backGray ju-header">
                呼出次数
              </div>
              <div class="ju-operator-li backGray ju-header">
                呼入时间（分钟）
              </div>
              <div class="ju-operator-li backGray ju-header">
                呼出时间（分钟）
              </div>
              <div class="ju-operator-li backGray ju-header">
                呼入次数百分比
              </div>
              <div class="ju-operator-li backGray ju-header">
                呼出次数百分比
              </div>
              <div class="ju-operator-li backGray ju-header">
                呼入时间百分比
              </div>
              <div class="ju-operator-li backGray ju-header">
                呼出时间百分比
              </div>
            </li>
            <li v-if="data.contact_region==null||data.contact_region==''" class="backWarning noData">未收集到联系人区域数据</li>
            <li v-if="data.contact_region!=null||data.contact_region!=''" v-for="item in data.contact_region">
              <div class="ju-operator-li">
                <div>{{item.region_loc}}</div>
              </div>
              <div class="ju-operator-li">
                <div>{{item.region_uniq_num_cnt}}</div>
              </div>
              <div class="ju-operator-li">
                <div>{{item.region_call_in_cnt}}</div>
              </div>
              <div class="ju-operator-li">
                <div>{{item.region_call_out_cnt}}</div>
              </div>
              <div class="ju-operator-li">
                <div>{{item.region_call_in_time | filterFixed}}</div>
              </div>
              <div class="ju-operator-li">
                <div>{{item.region_call_out_time | filterFixed}}</div>
              </div>
              <div class="ju-operator-li">
                <div>{{item.region_call_in_cnt_pct | filterFixed}}</div>
              </div>
              <div class="ju-operator-li">
                <div>{{item.region_call_out_cnt_pct | filterFixed}}</div>
              </div>
              <div class="ju-operator-li">
                <div>{{item.region_call_in_time_pct | filterFixed}}</div>
              </div>
              <div class="ju-operator-li">
                <div>{{item.region_call_out_time_pct | filterFixed}}</div>
              </div>

            </li>

          </div>
        </div>
      </div>
      <!--通话数据分析-->
      <div class="ju-apply ju-info ju-behavior ju-communicate">
        <div class="ju-apply-title">
          通话数据分析
        </div>
        <div class="ju-info-subtitle">
          <div class="ju-subtitle-inner ju-subtitle-inner2 colorBlue">
            通话数据分析
          </div>
          <div class="ju-info-lists">
            <li>
              <div class="ju-operator-li backGray ju-header">
                号码
              </div>
              <div class="ju-operator-li backGray ju-header">
                互联网标识
              </div>
              <div class="ju-operator-li backGray ju-header">
                需求类型
              </div>
              <div class="ju-operator-li backGray ju-header">
                归属地
              </div>
              <div class="ju-operator-li backGray ju-header">
                联系次数
              </div>
              <div class="ju-operator-li backGray ju-header">
                联系时间（分）
              </div>
              <div class="ju-operator-li backGray ju-header">
                主叫次数
              </div>
              <div class="ju-operator-li backGray ju-header">
                被叫次数
              </div>
            </li>
            <li v-if="data.contact_list==null||data.contact_list==''" class="backWarning noData">未收集到通话数据</li>
            <li v-if="data.contact_list!=null||data.contact_list!=''" v-for="item in data.contact_list">
              <div class="ju-operator-li">
                <div>{{item.phone_num}}</div>
              </div>
              <div class="ju-operator-li">
                <div :class="item.contact_name=='未知'?'':'backBlue'">{{item.contact_name}}</div>
              </div>
              <div class="ju-operator-li">
                <div>{{item.needs_type}}</div>
              </div>
              <div class="ju-operator-li">
                <div>{{item.phone_num_loc}}</div>
              </div>
              <div class="ju-operator-li">
                <div>{{item.call_cnt}}</div>
              </div>
              <div class="ju-operator-li">
                <div>{{item.call_len | filterFixed}}</div>
              </div>
              <div class="ju-operator-li">
                <div>{{item.call_out_cnt}}</div>
              </div>
              <div class="ju-operator-li">
                <div>{{item.call_in_cnt}}</div>
              </div>

            </li>

          </div>
        </div>
      </div>
      <!--联系人信息和地址信息-->
      <div class="ju-apply ju-info ju-behavior ju-add">
        <div class="ju-apply-title">
          联系人信息和地址信息
        </div>
        <div class="ju-info-subtitle">
          <div class="ju-subtitle-inner ju-subtitle-inner3 colorBlue">
            联系人数据（来源于紧急联系人和电商收货人）
          </div>
          <div class="ju-info-lists">
            <li>
              <div class="ju-operator-li backGray ju-header">
                联系人
              </div>
              <div class="ju-operator-li backGray ju-header">
                最早联系时间
              </div>
              <div class="ju-operator-li backGray ju-header">
                最晚联系时间
              </div>
              <div class="ju-operator-li backGray ju-header">
                联系电话
              </div>
              <div class="ju-operator-li backGray ju-header">
                近半年通话/短信次数和时长
              </div>

            </li>
            <li v-if="data.collection_contact==null||data.collection_contact==''" class="backWarning noData">未收集到联系人数据
            </li>
            <li v-if="data.deliver_address!=null||data.collection_contact!=''" v-for="item in data.collection_contact">
              <div class="ju-operator-li">
                <div>{{item.contact_name}}</div>
              </div>
              <div class="ju-operator-li">
                <div>{{item.contact_details[0].trans_start}}</div>
              </div>
              <div class="ju-operator-li">
                <div>{{item.contact_details[0].trans_end}}</div>
              </div>
              <div class="ju-operator-li">
                <div>{{item.contact_details[0].phone_num}}</div>
              </div>
              <div class="ju-operator-li">
                <div>
                  <span>通话{{item.contact_details[0].call_len | filterFixed}}分钟/</span>
                  <span>短信{{item.contact_details[0].sms_cnt}}条</span>
                </div>
              </div>

            </li>

          </div>
        </div>
        <div class="ju-info-subtitle">
          <div class="ju-subtitle-inner colorBlue">
            地址信息
          </div>
          <div class="ju-info-lists ju-position">
            <li>
              <div class="ju-operator-li backGray ju-header">
                地址
              </div>
              <div class="ju-operator-li backGray ju-header">
                总消费金额
              </div>
              <div class="ju-operator-li backGray ju-header">
                收货人姓名
              </div>
              <div class="ju-operator-li backGray ju-header">
                收货人手机
              </div>

            </li>
            <li v-if="data.deliver_address==null||data.deliver_address==''" class="backWarning noData">未收集到地址信息数据</li>
            <li v-if="data.deliver_address!=null||data.deliver_address!=''" v-for="item in data.deliver_address">
              <div class="ju-operator-li">
                <div>{{item.address}}</div>
              </div>
              <div class="ju-operator-li">
                <div>{{item.total_amount}}</div>
              </div>
              <div class="ju-operator-li">
                <div>{{item.receiver[0].name}}</div>
              </div>
              <div class="ju-operator-li">
                <div>{{item.receiver[0].phone_num_list | filterString}}</div>
              </div>
            </li>

          </div>
        </div>
      </div>
      <!--电商数据分析-->
      <div class="ju-apply ju-info ju-behavior ju-em">
        <div class="ju-apply-title">
          电商数据分析
        </div>
        <div class="ju-info-subtitle">
          <div class="ju-subtitle-inner ju-subtitle-inner2 colorBlue">
            电商消费记录
          </div>
          <div class="ju-info-lists">
            <li>
              <div class="ju-operator-li backGray ju-header">
                月份
              </div>
              <div class="ju-operator-li backGray ju-header">
                全部消费笔数
              </div>
              <div class="ju-operator-li backGray ju-header">
                全部消费金额(元)
              </div>
              <div class="ju-operator-li backGray ju-header">
                品类分析
              </div>

            </li>
            <li v-if="data.ebusiness_expense==null||data.ebusiness_expense==''" class="backWarning noData">未收集到电商消费数据
            </li>
            <li v-if="data.ebusiness_expense!=null||data.ebusiness_expense!=''" v-for="item in data.ebusiness_expense">
              <div class="ju-operator-li">
                <div>{{item.trans_mth}}</div>
              </div>
              <div class="ju-operator-li">
                <div>{{item.all_count}}</div>
              </div>
              <div class="ju-operator-li">
                <div>{{item.all_amount}}</div>
              </div>
              <div class="ju-operator-li">
                <div>{{item.all_category | filterString}}</div>
              </div>
            </li>

          </div>
        </div>
      </div>
      <!--出行数据-->
      <div class="ju-apply ju-info ju-behavior ju-trip">
        <div class="ju-apply-title">
          出行数据分析
        </div>
        <div class="ju-info-subtitle">
          <div class="ju-subtitle-inner ju-subtitle-inner2 colorBlue">
            出行数据
          </div>
          <div class="ju-info-lists">
            <li>
              <div class="ju-operator-li backGray ju-header">
                时间段
              </div>
              <div class="ju-operator-li backGray ju-header">
                出发时间
              </div>
              <div class="ju-operator-li backGray ju-header">
                回程时间
              </div>
              <div class="ju-operator-li backGray ju-header">
                出发地
              </div>
              <div class="ju-operator-li backGray ju-header">
                目的地
              </div>

            </li>
            <li v-if="data.trip_info==null||data.trip_info==''" class="backWarning noData">未收集到出行数据</li>
            <li v-if="data.trip_info!=null||data.trip_info!=''" v-for="item in data.trip_info">
              <div class="ju-operator-li">
                <div>{{item.trip_type}}</div>
              </div>
              <div class="ju-operator-li">
                <div>{{item.trip_start_time}}</div>
              </div>
              <div class="ju-operator-li">
                <div>{{item.trip_end_time}}</div>
              </div>
              <div class="ju-operator-li">
                <div>{{item.trip_leave}}</div>
              </div>
              <div class="ju-operator-li">
                <div>{{item.trip_dest}}</div>
              </div>

            </li>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading: false,
        data: null
      }
    },
    methods: {
      UserInfo() {
        let that = this;
        that.loading = true;
        that.ajax({
          url: '/api/mobileOperator/getBill/V2',
          headers:{
            'Content-type': 'application/x-www-form-urlencoded'
          },
          data: {
            userId: that.$route.query.userId
          },
          success(data) {
            if (data.code == '0') {
              that.data = data.data;
            }
            that.loading = false;
          }
        })
      }
    },
    filters: {
      filterFixed: function (value) {
        var value = Number(value);
        return value.toFixed(2);
      },
      filterPlace: function (value) {
        return value != '' ? value : '无法定位居住地址(未提供居住地址)';
      },
      filterString: function (value) {
        if (value == '') {
          return '无数据';
        }
        return value.toString();
      },
      filterNoData: function (value) {
        if (value == '-1.0') {
          return '无数据';
        }
        return value;
      },
      filterPercent: function (value) {
        return (value * 100).toFixed(2);
      }
    },
    created() {
      let that = this;
      that.UserInfo();
    }
  }
</script>

<style lang="less">
  /*通用magrin-bottom*/
  @mb: 20px;
  /*字体白色*/
  @fc: #fff;
  /*标题蓝色背景*/
  @titleB: #0066bb;
  /*li内的表格magrin-right*/
  @mr: 10px;
  /*li边框颜色*/
  @bb: #c9c9c9;

  /*封装*/
  .height(@h) {
    line-height: @h;
    height: @h;
  }

  /*表格内字体通用*/
  .font-sc(@s:14px,@c:#666) {
    font-size: @s;
    color: @c;
  }

  /*封装*/

  /*字体*/
  /*灰色字体*/
  .colorGrey {
    color: #666;
    line-height: 30px;
  }

  /*蓝色字体*/
  .colorBlue {
    color: @titleB;
    font-size: 14px;
  }

  /*成功字体色*/
  .colorGreen {
    color: #3c763d;
  }

  /*警告字体色*/
  .colorGray {
    color: #8a6d3b;
  }

  /*白色字体*/
  .colorWhite {
    color: #fff;
    font-size: 14px;
    line-height: 22px;
  }

  /*表格头部黑色居中*/
  .ju-header {
    text-align: center;
    color: #333;
    padding-left: 0px !important;
  }

  /*字体*/

  /*背景*/
  /*深绿色背景方块*/
  .backGreen {
    background-color: #5cb85c;
    padding: 0 4px;
    border-radius: 4px;
    color: #fff;
    .height(22px)
  }

  /*浅绿色背景*/
  .backGre {
    background-color: #dff0d8;
  }

  /*红色背景方块*/
  .backRed {
    background-color: #d9534f;
    padding: 0 4px;
    border-radius: 4px;
    color: #fff;
    .height(22px)
  }

  /*粉色背景*/
  .backWarning {
    background-color: #FEDFE1;
  }

  /*深灰色背景方块*/
  .backGrey {
    background-color: #777;
    padding: 0 4px;
    color: #fff;
    border-radius: 4px;
    color: #fff;
    .height(22px)
  }

  /*浅黄色背景*/
  .backYellow {
    background-color: #fcf8e3;
  }

  /*浅灰色背景*/
  .backGray {
    background-color: #f5f5f5;
  }

  /*蓝色背景方块*/
  .backBlue {
    background-color: #428bca;
    padding: 0 4px;
    color: #fff;
    border-radius: 4px;
    color: #fff;
    .height(22px)
  }

  /*白色背景*/
  .backWhite {
    background-color: #fff;
  }

  /*背景*/

  li {
    list-style: none;
  }

  .reportJuxinli-page {
    padding: 40px 30px;
    font-family: "Microsoft YaHei", "arial";
    width: 1140px;
    margin: 40px auto;
    box-shadow: 0 0 10px #bbb;
    border-left: 1px #ccc solid;
    border-right: 1px #ccc solid;
    border-radius: 4px;
    .juxinli-title {
      font-weight: 700;
      text-align: center;
      font-size: 30px;
      margin-bottom: @mb;
    }
    .juxinli-subtitle {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-bottom: @mb;
    }
    /*用户申请表检测*/
    .ju-apply {
      padding-bottom: 50px;
      .ju-apply-title {
        color: #fff;
        font-size: 16px;
        text-align: center;
        .height(44px);
        border-radius: 4px 4px 0 0;
        background: @titleB;
      }
      .ju-apply-list {
        display: flex;
        flex-direction: row;
        padding: 10px 0;
        border-bottom: 1px solid @bb;
        &:nth-of-type(n+5) {
          border-bottom: 0px;
        }
        .ju-apply-left {
          width: 90px;
          margin-right: 10px;
          background-color: #f5f5f5;
          text-align: center;
          .font-sc(14px, #333);
          .height(30px)
        }
        .ju-apply-inner {
          display: flex;
          flex-direction: column;
          .ju-apply-in {
            display: flex;
            flex-direction: row;
            .ju-apply-right {
              display: flex;
              flex-direction: row;
              align-items: center;&:extend(.colorGrey);
              min-width: 600px;
              font-size: 14px;
            }
            .ju-apply-other {
              &:extend(.colorGrey);
              display: flex;
              flex-direction: row;
              align-items: center;
              font-size: 14px;
            }
            /*ju-apply-right,ju-apply-other*/
            .ju-apply-rights {
              margin-right: @mr;
              display: flex;
              flex-direction: row;
              align-items: center;
            }
          }

        }

      }
    }
    /*用户信息表检测*/
    .ju-info {
      .ju-info-subtitle {
        padding-top: 22px;
        .ju-subtitle-inner {
          width: 98px;
          -webkit-border-radius: 5px 5px 0 0;
          background-color: #f5f5f5;
          text-align: center;
          margin-left: 5px;
          .height(30px)
        }
        .ju-subtitle-inner2 {
          width: 120px;
        }
        .ju-subtitle-inner3 {
          width: 327px;
        }
      }
      .ju-info-lists {
        display: flex;
        flex-direction: row;
        border: 1px @bb solid;
        justify-content: space-between;
        .ju-infoList-title {
          display: flex;
          flex-direction: column;
          justify-content: center;
          width: 110px;
          border-right: 1px @bb solid;
          .font-sc();
          text-align: center;
        }
        .ju-infoList-subtitle {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          flex: 1;
          li {
            display: flex;
            flex-direction: row;
            border-top: 1px @bb solid;
            flex: 1;
            &:first-child {
              border-top: 0;
            }
            .ju-infoList-left {
              line-height: 34px;
              .font-sc();
              width: 210px;
              border-right: 1px @bb solid;
              padding-left: 15px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              flex-wrap: wrap;
            }
            .ju-infoList-right {
              line-height: 34px;
              font-size: 14px;
              padding-left: 15px;
              display: flex;
              flex-direction: row;
              align-items: center;
              flex-wrap: wrap;
              flex: 1;
              &:extend(.colorGrey);
            }
          }
        }
      }
      /*黑名单*/
      .ju-blackList {
        .ju-info-lists {
          .ju-infoList-title {
            height: 300px;
          }
          .ju-infoList-subtitle {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            .last-li {
              height: 68px !important;
            }
          }
        }
      }
    }

    /*用户行为检测*/
    .ju-behavior {
      .ju-info-lists {
        display: flex;
        flex-direction: column;
        li {
          display: flex;
          flex-direction: row;
          line-height: 30px;
          border-top: 1px solid @bb;
          &:first-child {
            border-top: 0;
          }
          .font-sc(14px);
          .ju-behavior-left {
            width: 200px;
            border-right: 1px solid @bb;
            padding-left: 20px;
          }
          .ju-behavior-center {
            width: 300px;
            border-right: 1px solid @bb;
            padding-left: 20px;
          }
          .ju-behavior-right {
            flex: 1;
            padding-left: 20px;
          }
        }
      }
    }

    /*运营商数据*/
    .ju-operator {
      .ju-info-lists {
        .ju-header {
          .height(40px);
        }
        li {
          line-height: 40px;
          .ju-operator-li {
            width: 83px;
            border-right: 1px solid @bb;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            &:nth-child(2) {
              width: 159px;
            }
            &:nth-child(3) {
              width: 66px;
            }
            &:nth-child(7) {
              width: 131px;
            }
            &:nth-child(9) {
              width: 131px;
            }
            &:last-child {
              border: 0px;
              width: 91px;
            }
          }
        }
      }
    }

    /*联系人区域汇总*/
    .ju-content {
      .ju-info-lists {
        .ju-header {
          .height(40px);
        }
        li {
          line-height: 40px;
          .ju-operator-li {
            width: 83px;
            border-right: 1px solid @bb;
            text-align: center;
            &:nth-child(n+5) {
              width: 124px;
            }
            &:last-child {
              border: 0px;
            }

          }
        }
      }
    }

    /*通话数据分析*/
    .ju-communicate {
      .ju-info-lists {
        .ju-header {
          .height(40px);
        }
        li {
          line-height: 40px;
          .ju-operator-li {
            width: 165px;
            border-right: 1px solid @bb;
            display: flex;
            justify-content: center;
            align-items: center;
            &:nth-child(2) {
              width: 313px;
            }
            &:nth-child(3) {
              width: 143px;
            }
            &:nth-child(4) {
              width: 81px;
            }
            &:nth-child(5) {
              width: 91px;
            }
            &:nth-child(6) {
              width: 121px;
            }
            &:nth-child(7) {
              width: 81px;
            }
            &:last-child {
              border: 0px;
              width: 81px;
            }

          }
        }
      }

    }

    /*联系人信息和地址信息*/
    .ju-add {
      .ju-info-lists {
        .ju-header {
          .height(40px);
        }
        li {
          line-height: 40px;
          .ju-operator-li {
            width: 219px;
            border-right: 1px solid @bb;
            text-align: center;
            &:first-child {
              width: 111px;
            }
            &:last-child {
              border: 0px;
              width: 320px;
            }

          }
        }
      }

    }

    /*电商数据分析*/
    .ju-add {
      .ju-info-lists {
        .ju-header {
          .height(40px);
        }
        li {
          line-height: 40px;
          .ju-operator-li {
            width: 219px;
            border-right: 1px solid @bb;
            text-align: center;
            &:first-child {
              width: 111px;
            }
            &:last-child {
              border: 0px;
              width: 319px;
            }

          }
        }
      }
      .ju-position {
        li {
          .ju-operator-li {
            width: 199px;
            border-right: 1px solid @bb;
            text-align: center;
            &:first-child {
              width: 479px;
            }
            &:last-child {
              border: 0px;
              width: 199px;
            }

          }
        }
      }

    }

    /*电商数据分析*/
    .ju-em {
      .ju-info-lists {
        .ju-header {
          .height(40px);
        }
        li {
          line-height: 40px;
          .ju-operator-li {
            width: 271px;
            border-right: 1px solid @bb;
            text-align: center;
            &:first-child {
              width: 263px;
            }
            &:last-child {
              border: 0px;
              width: 271px;
            }

          }
        }
      }

    }

    /*出行数据*/
    .ju-trip {
      .ju-info-lists {
        .ju-header {
          .height(40px);
        }
        li {
          line-height: 40px;
          .ju-operator-li {
            width: 271px;
            border-right: 1px solid @bb;
            text-align: center;
            &:first-child {
              width: 263px;
            }
            &:last-child {
              border: 0px;
              width: 273px;
            }

          }
        }
      }

    }
    .noData {
      display: flex;
      justify-content: center;
    }
  }
</style>
